// 导入 ReactDOM
import ReactDOM from 'react-dom/client';

// 创建渲染根节点
const root = ReactDOM.createRoot(document.getElementById('root'));

// 数据
const name = 'Jack';
const age = 18;
const hobbies = ['吃饭', '睡觉', '敲代码'];
const obj = {
  name: 'Rose',
  age: 18,
};
const fn = () => {
  return <h1>天天向上</h1>;
};
const h1 = <h1>好好学习</h1>;
const url =
  'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png';

// UI 解构
const div = (
  <div>
    <h2>{name}</h2>
    <h2>{age}</h2>
    <h2>{hobbies.join('==>')}</h2>
    <h2>
      {obj.name} {obj.age}
    </h2>
    <h2>{age > 18 ? '谈恋爱' : '敲代码'}</h2>
    <div>{fn()}</div>
    <div>{h1}</div>
    <img src={url} alt="logo"></img>
  </div>
);

// 渲染这个标签（React 元素）
root.render(div);
